<template>
  <div>
    <div class="login-box">
      <van-cell-group>
        <van-field
          v-model="username"
          label="账号"
          icon="clear"
          placeholder="请输入用户名"
          @click-icon="username = ''"
        >
        </van-field>
        <van-field
          v-model="password"
          :type="passObj.type"
          :icon="passObj.icon"
          label="密码"
          placeholder="请输入密码"
          @click-icon="passwordIconFn"
          >
        </van-field>
      </van-cell-group>
      <van-button class="mt-30" size="large" type="danger">登录</van-button>
      <van-row class="mt-30 login-nav">
        <van-col :span="8"><router-link to="register">手机快速注册</router-link></van-col>
        <van-col class="tr" :span="6" :offset="10"><router-link to="forget">忘记密码</router-link></van-col>
      </van-row>
      <div class="footer-login-box tc mt-30">
        <p>第三方账号快速登录</p>
        <i class="iconfont icon-weixindenglu"></i>
      </div>
      
    </div>
    
  </div>
</template>

<script>
import { CellGroup,Icon, Field ,Col,Row,Button} from 'vant'

export default {
  name: 'login',
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Field.name]: Field,
    [Icon.name]: Icon,
    [Button.name]: Button,
    [CellGroup.name]: CellGroup
  },
  data () {
    return {
      passObj:{
        icon:'password-view',
        type:'password'
      },
      username:'',
      password:''
    }
  },
  methods:{
    passwordIconFn(){
      if(this.passObj.type=='text'){
        this.passObj.icon='password-view'
        this.passObj.type='password'
      }else{
        this.passObj.icon='password-not-view'
        this.passObj.type='text'
      }
      
    }
  }
}
</script>

<style lang="less">
.login-box{
  margin:2.2rem auto 0;
  width:9rem;
  font-size:14px;
  .login-nav{}
}
</style>
